<!DOCTYPE html>
<html>
<head>
    <title>Parallel Plate Capacitor Diagram</title>
</head>
<body>
    <canvas id="capacitorCanvas" width="550" height="400"></canvas>
    <script>
        const canvas = document.getElementById('capacitorCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to mimic the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        const baseFont = '22px Arial';
        const subFont = '16px Arial';

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Define coordinates ---
        const capStartX = 200;
        const capEndX = 480;
        const yTopPlate = 100;
        const yMidPlate = 180;
        const yBotPlate = 260;
        const wireXLeft = 100;
        const vSourceY1 = 150; // top of V symbol
        const vSourceY2 = 180; // bottom of V symbol

        // --- Draw capacitor plates ---
        ctx.beginPath();
        ctx.moveTo(capStartX, yTopPlate);
        ctx.lineTo(capEndX, yTopPlate);
        ctx.moveTo(capStartX, yMidPlate);
        ctx.lineTo(capEndX, yMidPlate);
        ctx.moveTo(capStartX, yBotPlate);
        ctx.lineTo(capEndX, yBotPlate);
        ctx.stroke();

        // --- Draw connecting wires and voltage source ---
        ctx.beginPath();
        // Wires
        ctx.moveTo(capStartX, yTopPlate);
        ctx.lineTo(wireXLeft, yTopPlate);
        ctx.moveTo(capStartX, yBotPlate);
        ctx.lineTo(wireXLeft, yBotPlate);
        // Vertical wire segments
        ctx.moveTo(wireXLeft, yTopPlate);
        ctx.lineTo(wireXLeft, vSourceY1 - 5);
        ctx.moveTo(wireXLeft, yBotPlate);
        ctx.lineTo(wireXLeft, vSourceY2 + 5);
        // Voltage source symbol
        ctx.moveTo(wireXLeft - 20, vSourceY1); // Positive terminal (long)
        ctx.lineTo(wireXLeft + 20, vSourceY1);
        ctx.moveTo(wireXLeft - 10, vSourceY2); // Negative terminal (short)
        ctx.lineTo(wireXLeft + 10, vSourceY2);
        ctx.stroke();

        // --- Draw Labels and Notations ---
        ctx.font = baseFont;
        ctx.textAlign = 'left';

        // V label
        ctx.fillText('V', wireXLeft - 50, 170);

        // Layer 1 labels (ε₁, σ₁)
        ctx.fillText('ε', 210, 150);
        ctx.font = subFont;
        ctx.fillText('1', 222, 155);
        ctx.font = baseFont;
        ctx.fillText(',', 232, 150);
        ctx.fillText('σ', 242, 150);
        ctx.font = subFont;
        ctx.fillText('1', 254, 155);
        ctx.font = baseFont;

        // Layer 2 labels (ε₂, σ₂)
        ctx.fillText('ε', 210, 230);
        ctx.font = subFont;
        ctx.fillText('2', 222, 235);
        ctx.font = baseFont;
        ctx.fillText(',', 232, 230);
        ctx.fillText('σ', 242, 230);
        ctx.font = subFont;
        ctx.fillText('2', 254, 235);
        ctx.font = baseFont;

        // E₁, E₂, n vectors and labels
        // E₁ group
        drawArrow(290, 140, 340, 140); // Horizontal arrow
        ctx.fillText('E', 350, 125);
        ctx.font = subFont;
        ctx.fillText('1', 362, 130);
        ctx.font = baseFont;
        drawArrow(380, yTopPlate, 380, 140); // Vertical arrow for E1

        // E₂ group
        drawArrow(290, 220, 340, 220); // Horizontal arrow
        ctx.fillText('E', 350, 205);
        ctx.font = subFont;
        ctx.fillText('2', 362, 210);
        ctx.font = baseFont;
        drawArrow(380, yMidPlate, 380, 220); // Vertical arrow for E2

        // n vector
        drawArrow(410, yMidPlate, 410, 220);
        ctx.fillText('n', 420, 210);

        // Dimension lines (d₁, d₂)
        const dimX = capEndX + 20;
        ctx.beginPath();
        // d₁ line and T-ends
        ctx.moveTo(dimX, yTopPlate);
        ctx.lineTo(dimX, yMidPlate);
        ctx.moveTo(dimX - 5, yTopPlate);
        ctx.lineTo(dimX + 5, yTopPlate);
        ctx.moveTo(dimX - 5, yMidPlate);
        ctx.lineTo(dimX + 5, yMidPlate);
        // d₂ line and T-ends
        ctx.moveTo(dimX, yMidPlate);
        ctx.lineTo(dimX, yBotPlate);
        ctx.moveTo(dimX - 5, yBotPlate);
        ctx.lineTo(dimX + 5, yBotPlate);
        ctx.stroke();

        // d₁, d₂ labels
        ctx.fillText('d', dimX + 15, 145);
        ctx.font = subFont;
        ctx.fillText('1', dimX + 25, 150);
        ctx.font = baseFont;
        ctx.fillText('d', dimX + 15, 225);
        ctx.font = subFont;
        ctx.fillText('2', dimX + 25, 230);
        ctx.font = baseFont;


        // Figure caption
        ctx.textAlign = 'center';
        ctx.font = '20px Arial';
        ctx.fillText('Fig. 1.21', canvas.width / 2, 360);

    </script>
</body>
</html>